<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box a b c">
        <!--  -->
        <p>1</p>
        <p>2</p>
        <p class="a">3</p>
    </div>

    <script>

        // arguments

        // classList
        //    forEach / add / remove / contains  / replace ...

        // NodeList     qsa     forEach   对页面元素的深复制
        //   forEach

        // HTMLCollection   tagName   className      没有forEach    对页面元素的浅复制



        // NodeList        有forEach方法     对页面元素的深复制
        // HTMLCollection  没有forEach方法   对页面元素的浅复制





        var oPs = document.querySelectorAll('p');   // NodeList

        var oPs2 = document.getElementsByTagName('p');

        var oBox = document.querySelector('.box');
        var oPs3 = oBox.children;    // HTMLCollection


        console.log(oBox.classList);


        console.log(oPs);
        console.log(oPs2);
        console.log(oPs3);


        setTimeout(function () {
            var oP = document.querySelector('.a');
            oP.remove();

            console.log(oPs);
            console.log(oPs2);
            console.log(oPs3);
        }, 1000)


        function fn() {
            console.log(arguments);
        }

        fn(2, 3, 4, 56, 7)


    </script>

</body>

</html>